<%
  css_color_name = case type.to_sym
  when :notice, :success
    "success"
  when :error, :alert
    "error"
  when :warning
    "warning"
  else
    "info"
  end
%>

<div class="alert alert-<%= css_color_name %>"
  data-controller="alert-message text-sm">
  <div class="flex items-center grow gap-2">
    <% if type.to_sym == :notice || type.to_sym == :success %>
      <i class="ti ti-circle-dashed-check"></i>
    <% else %>
      <i class="ti ti-alert-square-rounded"></i>
    <% end %>
    <span><%= message %></span>
  </div>

  <div class="flex items-center">
    <button data-action="click->alert-message#closeMessage"
      class="btn btn-sm btn-ghost">
      <i class="ti ti-x"></i>
    </button>
  </div>
</div>
